<template>
    <div ref="chartDom" class="container"></div>
</template>

<script>
export default {
    data() {
        return {
            rawData: {
                '2022': {
                    '专场宣讲会': { sessions: 100, jobs: 200 },
                    '中小型招聘会': { sessions: 302, jobs: 400 },
                    '大型招聘会': { sessions: 301, jobs: 350 },
                },
                '2023': {
                    '专场宣讲会': { sessions: 150, jobs: 250 },
                    '中小型招聘会': { sessions: 350, jobs: 450 },
                    '大型招聘会': { sessions: 280, jobs: 380 },
                },
            },
            chartInstance: null,
        };
    },
    computed: {
        chartData() {
            const categories = ['专场宣讲会', '中小型招聘会', '大型招聘会'];
            const indicators = ['sessions', 'jobs'];

            // 柱状图系列（2022年）
            const barSeries = indicators.map(indicator => {
                const barColor = indicator === 'sessions' ? '#37A2FF' : '#4FD8DE';
                return {
                    name: `2022 ${indicator === 'sessions' ? '场次' : '岗位'}`,
                    type: 'bar',
                    barWidth: 20,
                    itemStyle: {
                        color: barColor,
                        borderRadius: [4, 4, 0, 0],
                    },
                    label: {
                        show: true,
                        position: 'top',
                        color: barColor, // 让标签颜色和柱状图颜色一致
                        fontSize: 8, // 缩小字体大小
                        overflow: 'truncate', // 确保一行展示
                        ellipsis: '...'
                    },
                    data: categories.map(category => this.rawData['2022'][category][indicator]),
                };
            });

            // 折线图系列（2023年）
            const lineSeries = indicators.map(indicator => {
                const lineColor = indicator === 'sessions' ? '#FF7F7F' : '#FFC076';
                return {
                    name: `2023 ${indicator === 'sessions' ? '场次' : '岗位'}`,
                    type: 'line',
                    symbol: 'circle',
                    symbolSize: 8,
                    itemStyle: {
                        color: lineColor,
                    },
                    lineStyle: {
                        width: 3,
                        type: 'dashed' // 虚线效果
                    },
                    label: {
                        show: true,
                        color: lineColor, // 让标签颜色和折线图颜色一致
                        formatter: '{c}',
                        position: 'top',
                        fontSize: 8, // 缩小字体大小
                        overflow: 'truncate', // 确保一行展示
                        ellipsis: '...'
                    },
                    data: categories.map(category => this.rawData['2023'][category][indicator]),
                };
            });

            return {
                categories,
                series: [...barSeries, ...lineSeries]
            };
        },
    },
    mounted() {
        this.initChart();
    },
    methods: {
        initChart() {
            this.chartInstance = this.$echarts.init(this.$refs.chartDom);

            const option = {
                backgroundColor: '#0b1f42',
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow',
                        shadowStyle: {
                            color: 'rgba(255, 255, 255, 0.1)'
                        }
                    },
                },
                legend: {
                    data: this.chartData.series.map(item => item.name),
                    textStyle: {
                        color: '#ffffff',
                        fontSize: 10 // 缩小字体大小
                    },
                    top: '0%',
                    itemWidth: 12, // 缩小图例标记的宽度
                    itemHeight: 12 // 缩小图例标记的高度
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    top: '15%',
                    containLabel: true,
                },
                xAxis: {
                    type: 'category',
                    data: this.chartData.categories,
                    axisLabel: {
                        color: '#ffffff',
                        interval: 0
                    },
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,0.3)'
                        }
                    },
                    axisTick: { show: false },
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        color: 'rgba(255,255,255,0.6)',
                        fontSize: 12
                    },
                    axisLine: { show: false },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,0.1)',
                            type: 'dashed'
                        }
                    }
                },
                series: this.chartData.series,
            };

            this.chartInstance.setOption(option);
            window.addEventListener('resize', this.handleResize);
        },
        handleResize() {
            this.chartInstance?.resize();
        },
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.handleResize);
        this.chartInstance?.dispose();
    },
};
</script>

<style lang="less" scoped>
.container {
    width: 24vw;
    height: 22vh;
}
</style>